<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="../../css/style.css" rel="stylesheet">

</head>
</head>
<body>
<div id="app">
<show_person pname="tom" sex="male">
  <span slot="age">27</span>
  <span slot="highst">178cm</span>
  <span slot="city">Nanjing</span>
</show_person>
</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
 <script type="text/javascript">
   Vue.component('show_person',{
     props:['pname','sex'],
     template:`<div>
<div>姓名:{{pname}}</div>
<div>性别:{{sex}}</div>
<div>年龄:<slot name="age"></slot></div>
<div>身高:<slot name="highst"></slot></div>
<div>城市:<slot name="city"></slot></div>
</div>`
   });
   new Vue({
     el:"#app"
   })
 </script>
</body>
</html>
